<template>
    <div class="navbar">
        <el-breadcrumb separator=">" class="el-breadcrumb">
            <el-breadcrumb-item :to="{ path: '/index' }" class="f-c-c el-breadcrumb-item">首页</el-breadcrumb-item>
            <el-breadcrumb-item class="f-c-c el-breadcrumb-item">{{
                title
            }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    name: 'BreadCrumb',
    props: {
        title: String
    },
    data() {
        return {
        };
    },
};
</script>

<style lang="less" scoped>
// 面包屑
.navbar {
    margin-top: 36px;
    display: flex;
    height: 30px;

    .el-breadcrumb {
        background-color: #f8f8f8;
        padding: 0 10px;

        .el-breadcrumb-item {
            float: left;
            height: 100%;
        }
    }

    .breadcrumb {
        font-size: 14px;
        line-height: 1;
    }
}
</style>